<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用标签</title>
</head>
<body>
    <!--h系列标签   标题标签  h1-h6 特征为：字体加粗加黑，尺寸由大到小  独占一行
       备注：如果在页面中写了不存在标签，标签的文本内容也能正常渲染，只不过没有该标签的特征，页面文件也不会报错
            h1标签一般只在页面中出现一次
            标签如果有换行，在页面渲染时带有一个小空格特效
    -->
    <!-- 静夜思 -->
    <h1>静夜思</h1>
    <h2>唐-李白</h2>
    <h3>床前明月光</h3>
    <h4>疑是地上霜</h4>
    <H5>举头望明月</H5>
    <H6>低头思故乡</H6>
    <H7>这是h7标签</H7>
    <H7>这也是H7标签</H7>

    <!--p标签   段落标签  独占一行的
        备注：
            在标签中添加的文本内容不会根据我们编写时使用的换行，在浏览器渲染时也会换行
            如果文本内容你换行了，在浏览器渲染时默认会添加一个空格
    -->
    <p>
        HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。
        HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。
        用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。
        使用HTML，将所需要表达的信息按某种规则写成HTML文件，
        通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即我们所见到的网页。
    </p>

    <p>
        自1990年以来，HTML就一直被用作万维网的信息表示语言，使用HTML描述的文件需要通过web浏览器显示出效果。HTML是一种建立网页文件的语言，通过标记式的指令(Tag)，将文字，图形、动画、声音、表格、链接、影像等内容显示出来。事实上，每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。HTML的普遍应用就是带来了超文本的技术―通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面，与世界各地主机的文件链接超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。HTTP的制定使浏览器在运行超文本时有了统一的规则和标准。
    </p>

    <!--hr标签  分割线标签  独占一行
        效果是：在页面中会显示一条分割线
        size属性：设置分割线的高度
    -->
    <hr>
    <!--span  文本标签   不会单独占一行
        一般使用span做数值统计
    -->
    <span>Java应用程序</span>
    <span>JavaWeb应用程序</span>

    <!--font字体标签  属性设置字体的样式 不独占一行
        size：设置字体的大小尺寸
        color：设置字体的颜色  纯单词表示  以#开头的十六进制(六个数字)  rgb()
        face：设置字体
    -->
    <font size="20px" color="black" face="宋体">
        我们正在学习HTML标签内容
    </font>
    <b style="size: 17px"> 我们正在学习HTML标签内容</b>
    <strong style="color: rgb(0,0,0)">我们正在学习HTML标签内容</strong>
    <i style="font-family: 草书">我们正在学习HTML标签内容</i>

    <!--br 换行标签
        让文本内容另起一行
    -->
    <br/>
    <span>Java应用程序</span> <br/>
    <span>JavaWeb应用程序</span>
    <font color="navy">
        <b>
            普通的font标签
        </b>
    </font>

    <!-- img 图像标签
         src：设置图片的路径（相对路径，一个是绝对路径）
         相对路径：从当前路径出发，相对于当前项目中的web目录下
         alt：当图片无法显示的时候，显示的是alt中的文本信息
         title：指的是该img标签的标题
         height：设置图像的高度
         width：设置图像宽度
         备注：
            设置图像标签的高度时，图片的宽度浏览器在进行渲染时会自动随着高度的比例进行缩放
            但是如果我们设置了图像宽度，那就按照设置的宽度来渲染
      -->
    <img src="../imgs/img.png" alt="图片已清理" title="这是win10的图片" height="600px">
    <img src="../imgs/1.jpg" height="400"/>

    <!--
        a标签  超链接标签  不独占一行
        href属性：跳转的目的地
        target：目标  _self默认在当前窗口打开,_blank 在新窗口打开,_parent 在父窗口打开  _top 跳转到顶部
    -->
    <a href="https://www.baidu.com">百度一下，你就知道</a>
    <a href="../demo01.html">跳转到demo01.html</a>
    <!--标签的嵌套-->
    <a href="https://baijiahao.baidu.com/s?id=1765783883415217349&wfr=spider&for=pc" target="_blank">
        <img src="../imgs/1.jpg" alt="图片不存在">
    </a>

    <a href="javascript:void(0);">哔哩哔哩</a>
    <a href="#">哔哩哔哩</a>
    <br>
    <!--列表标签  组合标签 li---列表
        ol  有序的   有序号的
        ul  无序的   没有序号的
        type属性：设置左边的序号样式
    -->
    智游集团开设的专业:
    <ol type="A">
        <li>Java大数据</li>
        <li>web大前端</li>
        <li>虚幻引擎</li>
        <li>嵌入式开发</li>
        <li>PLC上位机</li>
        <li>机器视觉</li>
        <li>UI产品经理</li>
    </ol>
    <br>
    河南的好大学：
    <ul type="square">
        <li>信息工程大学</li>
        <li>洛阳陆军学院</li>
        <li>中国科学技术大学</li>
        <li>河南大学</li>
        <li>郑州大学</li>
    </ul>

    <!--iframe 内联框架标签
        iframe 可以完整的包含一个页面的内容
        name：设置iframe标签的名称  可以关联a标签，通过a标签中的target属性
        height:设置内联框架标签的高度值
        width：设置内联框架标签的宽度
        frameborder:设置内联框架标签的边框值
        scrolling:设置是否进行页面滚动

    -->
    <iframe src="" frameborder="0"></iframe>
    <!--table 表格标签  组合标签
        tr：表格行标签
        td：表格单元格标签
    -->
    <table border="1">
        <caption>表格标题</caption>
        <tr>
            <td>1.1</td>
            <td>1.2</td>
            <td>1.3</td>
        </tr>
        <tr>
            <td>2.1</td>
            <td>2.2</td>
            <td>2.3</td>
            <td>2.4</td>
        </tr>
        <tr>
            <td>3.1</td>
            <td>3.3</td>
            <td>3.4</td>
        </tr>
    </table>

</body>

</html>